<template>
    <div>
        <!-- 个人资料设置 -->
        <mt-header title="我的资料" fixed style="background-color:  rgb(254,0,0);">
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
            <mt-button slot="right"></mt-button>
        </mt-header>
        <div id="minest">
            <mt-cell title="用户名" :value="mine.username"> </mt-cell>
            <mt-field label="手机号" :value="mine.mobilePhone" v-model="mobilePhone"> </mt-field>
            <mt-field label="QQ" :value="mine.qq" v-model="qq"></mt-field>
            <mt-field label="邮箱" :value="mine.email" v-model="email"></mt-field>
            <mt-field label="自我介绍" :value="mine.introduction" type="textarea" v-model="introduction" rows="4"></mt-field>
    
            <br>
            <input id="submitBtn" class="editBtn" type="submit" name="submit" @click="Edit" value="修改信息" />
    
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'mineSetting',
    data() {
        return {
            mine: {},
            mobilePhone: '',
            qq: '',
            email: '',
            introduction: '',
            username: sessionStorage.getItem("username")
        }
    },
    created() {
        this.getuserdata()
    },
    methods: {
        //    获取用户数据
        getuserdata() {
            if(this.username!==null  ){

            let usn = encodeURI(this.username)
            axios.get(`/api/users/${usn}`)
                .then(res => {


                    this.mine = res.data

                })
                .catch(err => {
                    console.log(err)
                })
        }
        else{
            this.$router.push({path:'/login'})
        }
        },
        //修改用户资料
        Edit() {
            if (this.username !== null) {
                let usn = encodeURI(this.username)//传输中带有中文参数，进行编码,用用户名进行进行唯一检索
                axios.post(`/api/users/${usn}`, {
                    email: this.email,
                    mobilePhone: this.mobilePhone,
                    qq: this.qq,
                    introduction: this.introduction,
                })
                    .then(res => {
                        this.getuserdata();
                        console.log(res.data)
                        console.log("ok!")
                    })
            }
            else {
                this.$router.push({ path: '/login' })
            }
        }
    }
}
</script>

<style>
/*settings*/

#minest {
    margin-top: 50px;
}

.editBtn {
    width: 100px;
    height: 40px;
    font-size: 16px;
    margin-top: 40px;
}

#submitBtn {
    background-color: rgb(254,0,0);
    color: white;
    width: 100px;

    border: none;
    margin-right: 15px;
}

#resetBtn {
    border: 1px solid darkgray;
    width: 100px;
    color: gray;
}
</style>